<template>
  <div class="log-analyze-root">
    <div class="analyze-form">
      <div class="row">
        <el-input style="width: 200px;margin-left: 0" v-model="analyzer" />
        <el-button @click="getLogAnalyze">查询</el-button>
        <div style="text-align: left;margin-right: 0;font-size: 12px">
          <span>ik_smart: 中文分词器，自动分词</span>;
          <span>ik_max_word: 中文分词器，按最多词汇</span>;
          <span>standard: 默认</span>
        </div>
      </div>

      <div class="row">
        <el-input type="textarea" class="bjs-textarea" style="margin-left: 0;margin-right: 0" resize="none" :rows="3"
          v-model="analyzeContent" />
      </div>
    </div>

    <div>
      <el-table border size="mini" class="bjs-table-mini" height="500px" :data="analyzeDatas">
        <el-table-column prop="term" min-width="300" :show-overflow-tooltip="true" label="分词结果" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { logAnalyzeApi } from "@/api/log";

const analyzer = ref('standard')
const analyzeContent = ref('')
const analyzeDatas = ref('')

const getLogAnalyze = () => {
  let params = {
    simple: false,
    analyzer: analyzer.value,
    text: analyzeContent.value
  }
  logAnalyzeApi(params).then((resp: any) => {
    analyzeDatas.value = resp.data
  })
}

</script>

<style scoped lang="scss">
.log-analyze-root {
  @include box(100%, 100%);

  .analyze-form {
    width: 100%;
    @include flex(column, flex-start, flex-start);
    margin-bottom: 10px;

    .row {
      @include flex(row, flex-start, center);
      @include box(100%, 50px);
      margin-bottom: 10px;

      .el-input,
      el-button,
      div {
        margin-left: 10px;
        margin-right: 10px;
      }


    }
  }
}
</style>